<template>
  <tui-navigation-bar
    :isOpacity="false"
    @init="initNavigation"
    @change="opacityChange"
    :isFixed="false"
    :scrollTop="scrollTop"
    title="科室列表"
    isCustom
    backgroundColor="#fff"
    color="#333"
  >
    <view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
      <tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
    </view>
    <view class="tui-header-title"> 科室列表 </view>
  </tui-navigation-bar>
  <view class="viewport">
    <view class="viewport-container">
      <view class="dep-header">
        <view class="dep-header-icon">
          <image
            src="@/static/images/09.png"
            style="width: 96rpx; height: 96rpx"
            mode="scaleToFill"
          />
          <view class="icon-box">
            <text class="icon-title">即时互联网医院</text>
            <text class="icon-subTitle">正常营业 | 周一至周日24小时</text>
          </view>
        </view>
        <view class="dep-header-change">
          <text class="dep-header-change-text">切换院区</text>
          <tui-icon name="arrowright" :size="20" color="#333"></tui-icon>
        </view>
      </view>
      <!-- 查询 -->
      <view class="viewport-search">
        <uni-easyinput
          prefixIcon="search"
          v-model="search"
          placeholder="搜索科室名称"
        ></uni-easyinput>
      </view>
      <tui-tabs
        :tabs="tabs"
        color="#666666"
        :width="TabWidth"
        :padding="0"
        selectedColor="#26C493"
        sliderBgColor="#26C493"
        :currentTab="currentTab"
        @change="change"
      >
      </tui-tabs>
      <!-- tab -->
    </view>
    <view v-show="currentTab === 0">
      <my-filtrate></my-filtrate>
    </view>
    <view v-show="currentTab !== 0">
       切换看这里的内容
    </view>
  </view>
</template>

<script lang="js" setup>
import { ref, reactive, getCurrentInstance } from 'vue'
import useNavBar from '@/pages/index/hooks/nav-bar'
import useTemplateInfo from '@/hooks/useTemplateInfo'
const instance = getCurrentInstance();
const options = ref({
  instance,
  class: '.viewport-container'
})
const {  width: TabWidth } = useTemplateInfo(options)
const { initNavigation, opacityChange, scrollTop, top, back } = useNavBar()
const search = ref('')
const currentTab = ref(0)

const tabs = reactive([ {
  			name: "普通门诊"
  		}, {
  			name: "专家门诊"
  		}])

const change = (e) => {
  currentTab.value = e.index
}
</script>

<style scoped lang="scss">
.viewport {
  box-sizing: border-box;
  background-color: #ffffff;
  padding-top: 44rpx;
  &-container {
    margin: 0 30rpx;
  }

  &-search {
    margin-bottom: 14rpx;
    margin-top: 32rpx;
  }
}
page {
  background: #ffffff;
}


.dep-header {
  display: flex;
  align-items: center;
}
.dep-header-icon {
  display: flex;
  align-items: center;
}

.icon-box {
  display: flex;
  flex-direction: column;
  padding-left: 16rpx;
}

.icon-title {
  font-size: 28rpx;
  color: #333;
  font-weight: 700;
}

.icon-subTitle {
  font-size: 24rpx;
  color: #999999;
  font-weight: 400;
  padding-top: 8rpx;
}

.dep-header-change {
  flex: 1;
  font-size: 24rpx;
  color: #999999;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.dep-header-change-text {
  padding-right: 4rpx;
}
</style>
